<template>
	<view class="container-robotPay"
		style="background: url(/static/imgbgc.png) no-repeat; background-size: 100% 100%;height: 100%;">
		<view class="header flex">
			<view class="lt">
				<image :src="$fun.imgUrl(imgurl)" mode=""></image>
			</view>
			<view class="rt">
				<view class="title">{{name1}}</view>
				<view class="money">{{$t('vnode.name24')}}
					<text>{{money}}</text>{{activeInfo.name}}
				</view>
			</view>
		</view>
		<view class="" style="color: #fff;">
			{{$t('vnode.name25')}}：
		</view>
		<view class="member">
			<u-radio-group v-model="radioValue" placement="column" @change="onChange">
				<view class="conter" style="" v-for="(item,index) in payInfo" :key='index'>
					<view class="data">
						<view class="" style="margin-right: 15rpx;">
							<image style="width:40rpx;height: 40rpx;" :src="$fun.imgUrl(item.image)" mode=""></image>
						</view>
						<view class="">{{item.name}}</view>
					</view>
					<view class="cent">
						<u-radio :customStyle="{marginBottom: '8px'}" :name="item.id" :label="item.name">
						</u-radio>
					</view>
				</view>
			</u-radio-group>
		</view>
		<view class="btn">
			<u-button type="primary" :text="$t('vnode.name26')" shape="circle" @click="handlePay"
				throttleTime="2000"></u-button>
		</view>
		<pay-board ref="payJP" :showBoard="showBoard" :priceText="money+''" @complete="complete"
			@closeBorad="handleModel"></pay-board>
	</view>
</template>

<script>
	import PayBoard from '@/components/xiaojia-keyBoard/xiaojia-keyBoard.vue'
	export default {
		components: {
			PayBoard
		},
		data() {
			return {
				id: '',
				imgurl: '',
				payInfo: [],
				radioValue: '',
				money: 0,
				showBoard: false,
				activeInfo: {},
				name1: '',
				type: ''
			};
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: this.$t('vnode.name9')
			})
			this.id = options.id
			this.imgurl = options.url
			this.money = options.money
			this.name1 = options.name
			this.type = options.type || ''
			this.getpayInfo()
		},
		methods: {
			onChange(e) {
				this.activeInfo = this.payInfo.find(item => item.id == e)
			},
			handleModel() {
				if (this.payType == 'wechat' || this.payType == 'alipay') {
					this.confirm()
				} else {
					this.showBoard = !this.showBoard
				}
			},
			complete(pass) {
				this.showBoard = false
				this.pay(pass)
			},
			async getpayInfo() {
				const res = await this.$fun.ajax.post('product/payInfo', {
					type: this.type
				})
				this.payInfo = res.data
			},
			async handlePay() {
				if (!this.radioValue) return this.$fun.msg(this.$t('vnode.name27'))
				this.showBoard = true
			},
			async pay(pass) {
				const params = {
					id: this.id,
					pay_id: this.radioValue,
					pay: pass,
					money: this.money,
					type: this.type
				}
				this.$fun.showLoading()
				const res = await this.$fun.ajax.post('product/buy', params)
				uni.hideLoading()
				this.$fun.msg(res.msg)
				if (res.code) {
					setTimeout(() => {
						this.$fun.jump('/pages/vnode/vnode', 3, 500)
					}, 500)
					this.$refs.payJP.password = ''
				} else {
					this.$refs.payJP.password = ''
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.container-robotPay {
		padding: 0 30rpx;

		::v-deep .u-radio__text {
			width: 100rpx;
		}

		.btn {
			margin-top: 300rpx;
		}

		.header {
			padding: 50rpx 50rpx;

			.lt {
				width: 300rpx;
				height: 290rpx;
			}

			.rt {
				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 38rpx;
				}

				.money {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 28rpx;

					text {
						font-family: DIN, DIN;
						font-weight: bold;
						font-size: 48rpx;
						color: #FF4201;
						line-height: 56rpx;
						margin: 0 10rpx;
					}
				}
			}
		}

		.member {
			.conter {
				width: 100%;
				height: 86rpx;
				background: rgba(209, 231, 250, 0.8);
				margin: 10rpx auto;
				border-radius: 10rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;



				.cent {
					display: flex;
					align-items: center;
					margin-top: 0;

					::v-deep .u-radio {
						margin-bottom: 0 !important;
					}

				}

				.data {
					color: #000;
					font-size: 28rpx;
					margin-right: 20rpx;
					display: flex;
				}

				.van-checkbox {
					margin-top: 65rpx;
				}
			}
		}
	}
</style>